<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>绑定接口</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body style="padding: 20px 10px;">

<!-- 你的 HTML 代码 -->
<div class="demoTable">
    数据源：
    <div class="layui-inline">
        <input class="layui-input" placeholder="搜索数据源" name="datasourceName" id="datasourceName" autocomplete="off">
    </div>
    接口：
    <div class="layui-inline">
        <input class="layui-input" placeholder="搜索接口" name="interfaceName" id="interfaceName" autocomplete="off">
    </div>
    <button class="layui-btn" id="demoReloadBtn">搜索</button>
    <button class="layui-btn" id="bindBtn">绑定</button>
</div>
<table id="demo" lay-filter="test"></table>
<script src="./layui/layui.js"></script>
<script>
layui.use(['element', 'layer', 'table', 'jquery'], function(){
  var layer = layui.layer;
  var table = layui.table;
  var $ = layui.$;

  window.getUserId = function(){
        var url = window.location.href;
        var userId = parseInt(url.substring(url.lastIndexOf("=") + 1));
        return userId;
  };

   //第一个实例
  var tableData = [];
  table.render({
    elem: '#demo'
    ,id: 'idTest'

    ,url: '/user-interface/findPageBind' //数据用户
    ,method: 'post'
    ,request: {
        pageName: 'pageNum' //页码的参数名称，默认：page
        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
    }
    ,page: true //开启分页
    ,where: {queryModel:{userId:getUserId()}}
    ,headers: {}
    ,done: function(res, curr, count){
        tableData = res.data;
    }
    ,parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.code, //解析用户状态
          "msg": res.msg, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.list //解析数据列表
        };
    }
    ,response: {
        statusName: 'code' //规定数据状态的字段名称，默认：code
        ,statusCode: '0000' //规定成功的状态码，默认：0
        ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
        ,countName: 'count' //规定数据总数的字段名称，默认：count
        ,dataName: 'data' //规定数据列表的字段名称，默认：data
    }
    ,contentType: 'application/json'
    ,cols: [[ //表头
      {field: 'id', type: 'checkbox', width:80, fixed: 'left'}
      ,{field: 'name', title: '接口名称'}
      ,{field: 'datasourceName', title: '数据源'}
    ]]
  });

  $("#bindBtn").click(function(){
    var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
    if(checkStatus.data.length == 0){
        parent.layer.msg("请选中一条数据");
        return false;
    }
    var data = checkStatus.data;
    var arr_id = new Array();
    for(var i = 0;i<data.length;i++){
        arr_id.push(data[i].id);
    }
    $.ajax({
        type: "POST",
        url: "/user-interface/bind",
        data: JSON.stringify({"userId": getUserId(), "interfaceIds": arr_id.toString()}),
        contentType: 'application/json',
        dataType: "json",
        success: function (result) {
            if (result.code == 0) {
                parent.window.location.reload();
            } else {
                parent.layer.msg(result.msg, {icon: 5});
            }
        }
      });
  });

    $("#demoReloadBtn").click(function(){
        var datasourceName = $("#datasourceName").val();
        var interfaceName = $("#interfaceName").val();
        table.reload('idTest', {where: {queryModel: {datasourceName: datasourceName, interfaceName: interfaceName}}}, true);
    });
});
</script>
</body>
</html>